<!--
 * @Description: 规章制度管理
 * @Author: Huang Junjie
 * @Date: 2021-05-06 15:53:02
 * @LastEditTime: 2021-10-14 10:48:32
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="rules-regulations-management-style">
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/ywzt/ywzt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/rule-regulation-management" :is-not-transparent="true" />
    <!-- 顶部导航栏 -->

    <div class="rules-regulations-of-power-supply-style app-container v-flex">
      <div class="title">供电专业规章制度</div>

      <!-- 顶部操作栏 -->
      <div class="top-operation">
        <filter-form
          :form="getDataListData"
          :data="filterData"
          :has-default-operation="false"
        >
          <el-date-picker
            v-model="getDataListData.startDate"
            type="date"
            placeholder="开始日期"
            :picker-options="pickerStartDate"
            style="margin-right: 10px;width: 152px;"
            size="mini"
          />
          <el-date-picker
            v-model="getDataListData.endDate"
            type="date"
            placeholder="结束日期"
            :picker-options="pickerEndDate"
            style="margin-right: 10px;width: 152px;"
            size="mini"
          />
          <el-button
            class="search-btn"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="search"
          >查询</el-button>
          <el-button
            class="item refresh-btn"
            size="mini"
            type="primary"
            icon="el-icon-refresh"
            @click="refreshGetDataList"
          >重置</el-button>
        </filter-form>
      </div>
      <!-- 顶部操作栏 -->

      <!-- 表格 -->
      <div ref="main" class="v-flex-elastic table-style">
        <base-table
          :height="height === 0 ? height = null : height"
          :loading="tableLoading"
          :data="tableData.list"
          :columns="baseTableOption.columns"
          :show-index="baseTableOption.showIndex"
          :show-selection="baseTableOption.showSelection"
          :show-operation="baseTableOption.showOperation"
          :show-filter-column="baseTableOption.showFilterColumn"
          :operaton-width="baseTableOption.operatonWidth"
          :default-operations="baseTableOption.defaultOperations"
          :has-auth="baseTableOption.hasAuth"
          :row-show-color="baseTableOption.rowShowColor"
        >
          <template slot="operations" slot-scope="{ row, $index }">
            <el-button
              class="el-icon-defined td-btn-operation"
              size="mini"
              @click.stop="viewDialog(row, $index)"
            >
              查看
            </el-button>
          </template>
        </base-table>
      </div>
      <!-- 表格 -->

      <!-- 分页 -->
      <div class="page-box">
        <pagination
          :total="tableData.total"
          :page.sync="getDataListData.page"
          :size.sync="getDataListData.size"
          @pagination="changePageOption"
        />
      </div>
      <!-- 分页 -->
    </div>

    <!-- 查看供电专业规章制度信息弹框 -->
    <lookDataDialog
      :dialog="lookDialog"
    />
  </div>
</template>

<script>
import { findGdbBelowDeptList as getDeptDataList } from '@/api/main';
import { getRuleRegulationDataList } from '@/api/jjxt/rule-regulation-management';
import { getDatatime } from '@/utils';
import { tableMixin } from '@/utils/public';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import lookDataDialog from './components/lookDataDialog';

export default {
  name: 'RulesRegulationsOfPowerSupply',
  components: {
    TopNavigationBar,
    lookDataDialog
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,

      // loading
      tableLoading: false,

      // 时间区间选择
      pickerStartDate: this.handleStartDate(),
      pickerEndDate: this.handleEndDate(),

      // 规章类型数组
      rulesTypeArr: [],

      // 顶部操作栏配置
      filterData: {
        // uploadDeptId: {
        //   key: 'uploadDeptId',
        //   type: 'selectTree',
        //   title: '上传部门',
        //   placeholder: '请选择上传部门',
        //   options: [],
        //   props: {
        //     label: 'label',
        //     value: 'id',
        //     parent: 'parentId',
        //     children: 'children'
        //   }
        // },
        uploadDeptId: {
          key: 'uploadDeptId',
          type: 'select',
          title: '上传部门',
          placeholder: '请选择上传部门',
          options: [],
          props: { label: 'deptName', value: 'deptId' }
        },
        year: {
          key: 'year',
          type: 'select',
          title: '年份',
          placeholder: '请选择年份',
          options: [],
          props: { label: 'ruleYear', value: 'ruleYear' }
        },
        title: {
          key: 'title',
          type: 'input',
          title: '标题',
          placeholder: '请输入标题'
        },
        fileNo: {
          key: 'fileNo',
          type: 'input',
          title: '文件号',
          placeholder: '请输入文件号'
        },
        ruleState: {
          key: 'ruleState',
          type: 'select',
          title: '信息状态',
          placeholder: '请选择信息状态',
          options: [
            { label: '正常', value: 'N' },
            { label: '失效', value: 'Y' }
          ],
          props: { label: 'label', value: 'value' }
        }
      },

      // 查询列表请求参数
      getDataListData: {
        startDate: '',
        endDate: '',
        uploadDeptId: '',
        year: '',
        title: '',
        fileNo: '',
        ruleState: '',
        page: 1,
        size: 20
      },

      // 表格数组
      tableData: {
        list: [],
        total: 0
      },

      // baseTable组件配置
      baseTableOption: {
        columns: [
          { prop: 'title', label: '标题', width: '250px' },
          { prop: 'year', label: '年份' },
          { prop: 'fileNo', label: '文件号' },
          { prop: 'dictSpecialtyName', label: '专业' },
          { prop: 'itemName', label: '规章类型', width: '200px' },
          { prop: 'shortName', label: '上传部门' },
          { prop: 'createDatetime', label: '上传时间' },
          { prop: 'ruleState', label: '状态' },
          { prop: 'disabledDate', label: '失效时间', formatter: (row) => row.disabledDate && row.ruleState === '失效' ? row.disabledDate : '' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '100px',
        defaultOperations: [],
        hasAuth: false,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 查看接触网检修信息弹窗配置
      lookDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: '',
        data: [],
        index: 0
      }
    };
  },
  mounted() {
    this.getDeptDataList(); // 查询部门信息列表
    this.getRuleRegulationDataList(); // 查询规章制度信息列表
    // 处理年份选择器
    for (let i = 5; i >= 0; i--) {
      this.filterData.year.options.push({ ruleYear: new Date().getFullYear() - i });
    }
    for (let i = 1; i < 6; i++) {
      this.filterData.year.options.push({ ruleYear: new Date().getFullYear() + i });
    }
  },
  methods: {
    handleStartDate() { // 查询开始日期控制
      const self = this;
      return {
        disabledDate(time) {
          if (self.getDataListData.endDate) {
            return new Date(self.getDataListData.endDate) < time.getTime();
          }
        }
      };
    },

    handleEndDate() { // 查询结束日期控制
      const self = this;
      return {
        disabledDate(time) {
          if (self.getDataListData.startDate) {
            return new Date(self.getDataListData.startDate) > time.getTime();
          }
        }
      };
    },

    // 打开查信息弹框
    viewDialog(row) {
      this.lookDialog.title = '查看规章制度';
      this.lookDialog.visible = true;
      this.lookDialog.type = 'view';
      this.lookDialog.disabled = true;
      this.lookDialog.form = row;
      this.lookDialog.data = [
        { column1: '标题',
          column2: row.title,
          type: 'textarea'
        },
        { column1: '年份',
          column2: row.year,
          column3: '文件号',
          column4: row.fileNo,
          column5: '专业',
          column6: row.dictSpecialtyName,
          type: 'text'
        },
        { column1: '规章类型',
          column2: row.itemName,
          column3: '上传部门',
          column4: row.shortName,
          column5: '上传时间',
          column6: row.createDatetime,
          type: 'text'
        },
        { column1: '状态',
          column2: row.ruleState,
          column3: '失效时间',
          column4: row.disabledDate,
          column5: '',
          column6: '',
          type: 'text'
        }
      ];
    },

    // 查询部门信息列表
    getDeptDataList() {
      getDeptDataList().then(res => {
        this.filterData.uploadDeptId.options = res.data;
      });
    },

    // 查询规章制度信息列表
    getRuleRegulationDataList() {
      this.tableLoading = true;
      if (this.getDataListData.startDate && typeof (this.getDataListData.startDate) === 'object') {
        this.getDataListData.startDate = getDatatime(this.getDataListData.startDate, 0, 10);
      }
      if (this.getDataListData.endDate && typeof (this.getDataListData.endDate) === 'object') {
        this.getDataListData.endDate = getDatatime(this.getDataListData.endDate, 0, 10);
      }
      getRuleRegulationDataList(this.getDataListData).then(res => {
        this.tableLoading = false;
        this.tableData = {
          list: res.data.records,
          total: res.data.total
        };
      }).catch(() => {
        this.tableLoading = false;
      });
    },

    // 改变分页配置
    changePageOption(data) {
      this.getDataListData.page = data.page;
      this.getDataListData.size = data.size;
      this.getRuleRegulationDataList(); // 查询规章制度信息列表
    },

    // 搜索
    search() {
      this.getDataListData.page = 1;
      this.getRuleRegulationDataList(); // 查询规章制度信息列表
    },

    // 重置查询
    refreshGetDataList() {
      this.getDataListData = {
        startDate: '',
        endDate: '',
        uploadDeptId: '',
        year: '',
        title: '',
        fileNo: '',
        ruleState: '',
        page: 1,
        size: 20
      };
      this.getRuleRegulationDataList(); // 查询规章制度信息列表
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-range-separator {
  width: 25px !important;
}

.rules-regulations-management-style {
  background-color: #f1f4fb;
  height: 100%;
}

#background {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.rules-regulations-of-power-supply-style {
  background-color: #ffffff;
  height: calc(100vh - 130px);
  margin: 30px;
  padding: 0;
  .top-operation {
    margin-left: 30px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    .operation-input {
      width: 150px;
      margin-right: 10px;
    }
    .operation-select {
      width: 150px;
      margin-right: 10px;
    }
    .refresh-btn {
      background-color: #3dbed5;
      border: 1px solid #3dbed5;
    }
    .refresh-btn:hover {
      background-color: #73cddd;
      border: 1px solid #73cddd;
    }
  }
  .title {
        position: relative;
        padding: 30px 50px 22px 50px;
        font-size: 24px;
        color: #323232;
        &:after {
          content: '';
          position: absolute;
          left: 28px;
          top: 30px;
          width: 7px;
          height: 26px;
          background-color: #379df9;
          border-radius: 4px;
        }
      }

  .table-style {
    padding: 0 28px 20px 28px;
    background-color: #ffffff;
  }
  .page-box {
    padding: 0 28px 10px 28px;
    background-color: #ffffff;
  }
}
</style>
